<template>
  <div>
  <common-button :style-object="json1" value="正常状态"></common-button>
  <common-button :style-object="json2" value="按下状态"></common-button>
  <common-button :style-object="json3" value="冻结状态"></common-button>
  <common-button :style-object="json4" value="按钮"></common-button>
  <common-button :style-object="json5" value="按钮"></common-button>
  <common-button :style-object="json6" value="按钮"></common-button>
  <common-button :style-object="json7" value="默认"></common-button>
  <common-button :style-object="json8" value="按钮"></common-button>
  <common-button :style-object="json9" value="按钮"></common-button>
  <common-button :style-object="json10" value="财产"></common-button>
  <common-button :style-object="json11" value="人员"></common-button>
  <common-button :style-object="json12" value="四字按钮"></common-button>
  <common-button :style-object="json13" value="三字按钮"></common-button>
  <common-button :style-object="json14" value="按钮"></common-button>
  <common-button :style-object="json15" value="C14食品制造业"></common-button>
  <common-button :style-object="json16" value="铁路、船舶、航空航天和其他运输设备制造业"></common-button>
  </div>
</template>
<style>

</style>
<script>
  import Vue from 'vue';
  import commonButton from  '../components/commonButton.vue'
  export default{
    components:{commonButton},
    data(){
      return{
                  json1:{
                    borderColor:"#C8D0D6",
                    borderStyle:"solid",
                    borderWidth:"1px",
                    opacity:"0.2",
                    borderRadius:"5rem",
                    fontSize:"0.8rem",
                    color:"#FFFFFF",
                    backgroundColor:"#2CA9FF",
                    width:"16.75rem",
                    lineHeight:"2.2rem"
                  },
                  json2:{
                    borderColor:"#C8D0D6",
                    borderStyle:"solid",
                    borderWidth:"0px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.8rem",
                    color:"#FFFFFF",
                    backgroundColor:"#1491E7",
                    width:"16.75rem",
                    lineHeight:"2.2rem"
                  },
                  json3:{
                    borderColor:"#C8D0D6",
                    borderStyle:"solid",
                    borderWidth:"0px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.8rem",
                    color:"#FFFFFF",
                    backgroundColor:"#d4eeff",
                    width:"16.75rem",
                    lineHeight:"2.2rem"
                  },
                  json4:{
                    borderColor:"#C8D0D6",
                    borderStyle:"solid",
                    borderWidth:"0px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.8rem",
                    color:"#FFFFFF",
                    backgroundColor:"#2CA9FF",
                    width:"6.4rem",
                    lineHeight:"2.2rem"
                  },
                  json5:{
                    borderColor:"#C8D0D6",
                    borderStyle:"solid",
                    borderWidth:"0px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.8rem",
                    color:"#FFFFFF",
                    backgroundColor:"#1491E7",
                    width:"6.4rem",
                    lineHeight:"2.2rem"
                  },
                  json6:{
                    borderColor:"#C8D0D6",
                    borderStyle:"solid",
                    borderWidth:"0px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.8rem",
                    color:"#FFFFFF",
                    backgroundColor:"#d4eeff",
                    width:"6.4rem",
                    lineHeight:"2.2rem"
                  },
                  json7:{
                    borderColor:"#C8D0D6",
                    borderStyle:"solid",
                    borderWidth:"0px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.8rem",
                    color:"black",
                    backgroundColor:"#ffffff",
                    width:"6.4rem",
                    lineHeight:"2.2rem"
                  },
                  json8:{
                    borderColor:"#C8D0D6",
                    borderStyle:"solid",
                    borderWidth:"0px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.8rem",
                    color:"#C6CED4",
                    backgroundColor:"#ffffff",
                    width:"6.4rem",
                    lineHeight:"2.2rem"
                  },
                  json9:{
                    borderColor:"#C8D0D6",
                    borderStyle:"solid",
                    borderWidth:"0px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.8rem",
                    color:"#C6CED4",
                    backgroundColor:"#f6f7f9",
                    width:"6.4rem",
                    lineHeight:"2.2rem"
                  },
                  json10:{
                    borderColor:"#C8D0D6",
                    borderStyle:"solid",
                    borderWidth:"0px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.8rem",
                    color:"#C6CED4",
                    backgroundColor:"#ffffff",
                    width:"5.4rem",
                    lineHeight:"1.8rem"
                  },
                  json11:{
                    borderColor:"#C8D0D6",
                    borderStyle:"solid",
                    borderWidth:"0px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.7rem",
                    color:"#ffffff",
                    backgroundColor:"#2CA9FF",
                    width:"5.4rem",
                    lineHeight:"1.8rem"
                  },
                  json12:{
                    borderColor:"#2CA9FF",
                    borderStyle:"solid",
                    borderWidth:"1px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.7rem",
                    color:"#2CA9FF",
                    backgroundColor:"#ffffff",
                    width:"5.4rem",
                    lineHeight:"1.8rem"
                  },
                  json13:{
                    borderColor:"#FF4E4E",
                    borderStyle:"solid",
                    borderWidth:"1px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.7rem",
                    color:"#FF4E4E",
                    backgroundColor:"#ffffff",
                    width:"5.4rem",
                    lineHeight:"1.8rem"
                  },
                  json14:{
                    borderColor:"#C7D0D7",
                    borderStyle:"solid",
                    borderWidth:"1px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.7rem",
                    color:"#353638",
                    backgroundColor:"#ffffff",
                    width:"5.4rem",
                    lineHeight:"1.8rem"
                  },
                  json15:{
                    borderColor:"#2CA9FF",
                    borderStyle:"solid",
                    borderWidth:"1px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.7rem",
                    color:"#2CA9FF",
                    backgroundColor:"#ffffff",
                    width:"8.4rem",
                    lineHeight:"1.8rem"
                  },
                  json16:{
                    borderColor:"#2CA9FF",
                    borderStyle:"solid",
                    borderWidth:"1px",
                    opacity:"1",
                    borderRadius:"5rem",
                    fontSize:"0.7rem",
                    color:"#2CA9FF",
                    backgroundColor:"#ffffff",
                    width:"18.4rem",
                    lineHeight:"1.8rem"
                  }
      }
    },
    ready(){
    },
    methods:{
    }
  }
</script>
